<template>
    <div>
        <button @click="say()" style="width: 100px; height: 50px; margin-top: 20px; margin-left: 20px;">我要写留言</button>
        <ul>
            <li v-for="(item, index) in arr" :key="index"><span>{{ item.title }}</span>&emsp;&emsp;&emsp;<button
                    @click="dele(item.id)">删除</button>
                <p>{{ item.contents }}</p>
            </li>
        </ul>
        <SonView v-show="is" @retext="reer" />
    </div>
</template>
<script>
import SonView from "@/components/SonView.vue"
export default {
    components: {
        SonView
    },
    data() {
        return {
            arr: [
                {
                    id: 0,
                    title: "第一条",
                    contents: "第一条内容"
                }, {
                    id: 1,
                    title: "第二条",
                    contents: "第二条内容"
                },
            ],
            is: false
        }
    },
    methods: {
        dele(id) {
            var a = this.arr.findIndex(item => item.id == id)
            this.arr.splice(a, 1)
        },
        say() {
            this.is = true
        },
        reer(a, b, c) {
            this.arr.push({
                id: a,
                title: b,
                contents: c
            })
        }
    }
}
</script>
<style>
* {
    padding: 0;
    margin: 0;
}

li {
    border: 2px red dashed;
    margin-bottom: 20px;
    padding: 10px;
}

ul {
    margin: 20px;
}
</style>